<template>
  <div>
    <el-dialog width="50%" :visible="detailDialogVisible" @close="close">
      <div slot="title" class="custom-title">
        变更详情
        <el-button type="text" @click="showAllData" >{{this.showAll ? '仅看变更项' : '查看全部'}}</el-button>
      </div>
      <el-table :data="filteredGridData" border>
        <el-table-column property="filed" label="台账详情信息" width="150"  />
        <el-table-column property="before" label="变更前" width="200" />
        <el-table-column property="after" label="变更后" />
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    detailDialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      gridData: [
        { filed: '序列号', before: '1', after: '2', isChange: false },
        { filed: '资源编码', before: '1', after: '2', isChange: false },
        { filed: '名称', before: '1', after: '2', isChange: false },
        { filed: '大类', before: '1', after: '2', isChange: false },
        { filed: '设备小类', before: '1', after: '2', isChange: true },
        { filed: '设备品牌', before: '1', after: '2', isChange: false },
        { filed: '备注', before: '1', after: '2', isChange: false },
        { filed: 'Mac地址', before: '1', after: '2', isChange: false },
        { filed: 'IP地址', before: '1', after: '2', isChange: false }
      ],
      showAll: false
    }
  },
  computed: {
    filteredGridData() {
      if (this.showAll) {
        return this.gridData // 返回所有数据
      } else {
        return this.gridData.filter(item => item.isChange) // 只返回 isChange 为 true 的数据
      }
    }
  },
  methods: {
    close() {
      this.detailDialogVisible = false
      this.showAll = false
      this.$emit('update:detailDialogVisible', false)
    },
    showAllData() {
      this.showAll = !this.showAll
    }
  }
}
</script>

<style>

</style>
